<template>
  <div class="index">
    <div class="center">
      <left></left>
      <div class="right">
        <top></top>
        <div class="hei10"></div>
        <div class="where" style="background: #fff; padding: 10px 30px; font-size: 14px; color: #595959;">当前位置：分销后台>意见反馈</div>
        <div class="hei10"></div>
        <div style=" color: rgb(89, 89, 89); font-weight: bold; font-size: 18px; padding: 20px;">意见反馈</div>
        <div style="background: rgb(220, 230, 243); color: rgb(15, 36, 66); padding: 10px 20px;">
          我们重视并欢迎您的意见表达，哪怕吐个槽儿也可以哦~
        </div>
        <div style="padding: 20px;">
          <div>
            <el-input v-model="all.title" style="width: 380px; margin-bottom: 20px;" placeholder="请输入标题"></el-input>
          </div>

          <div style=" margin-bottom: 20px; ">
            <fuwenben :description="all.description" @fuwenbenfanhui="fuwenbenfanhui"></fuwenben>
          </div>

          <div>
            <el-input v-model="all.mobile" style="width: 380px; margin-bottom: 20px;" placeholder="请输入您的联系方式，手机号或微信号"></el-input>
          </div>
          
          <div style="color: rgb(168, 168, 168); margin: 20px 0;">为了更好的解决您的问题，建议留下联系方式我们可能会联系您</div>
          
          <el-button type="danger" round @click="tijiao" :disabled="ing" style="">提交</el-button>
          
        </div>
      </div>
    </div>
    <el-dialog title="提交成功" center :visible.sync="log" width="500px">
    	<div style="text-align: center; padding: 30px 0; color: rgb(174, 174, 174);">
    		您的意见一定会被阅读，请留意预留的联系方式，我们可能会联系您哦~
    	</div>
    	<span slot="footer" class="dialog-footer">
    		<el-button type="danger" round @click="log = false">确认</el-button>
    	</span>
    </el-dialog>
  </div>
</template>

<script>
  import axios from "axios";
  import top from '@/components/top.vue'
  import left from '@/components/left.vue'
  import foot from "@/components/foot.vue"
  import fuwenben from "../../components/fuwenben/fuwenben.vue";
  export default {
    components: {
      "left": left,
      "top": top,
      "foot": foot,
      fuwenben
    },
    name: 'index',
    data() {
      return {
        all:{
          description:"",
          id: "",
          is_read: "",
          mobile: "",
          title: "",
        },
        log:false,
        ing:false
      }
    },
    created() {

    },
    methods:{
      fuwenbenfanhui:function(html){
        this.all.description = html
      },
      tijiao:function(){
        if(!this.all.title){
          this.$message.error('请输入标题');
          return false
        }
        if(!this.all.description){
          this.$message.error('请输入内容');
          return false
        }
        
        this.ing = true
        axios.post('/api/system/feedback/add',this.all)
        	.then(response => {
        		if(response.data.msg.code == 0){
        			this.log = true
              setTimeout(()=>{
                this.ing = false
              },100)
        		}else{
        			this.$message.error(response.data.msg.info);
        		}
        	})
      },
    }
  }
</script>

<style lang="scss" scoped>
  /deep/ .el-button--danger {
      color: #FFF;
      background-color: #2974FF;
      border-color: #2974FF;
  }
  /deep/ .w-e-text-container{ z-index:99 !important;}
  /deep/ .el-dialog__wrapper{ z-index: 10002 !important;}
</style>
